<template>
  <div>
    <!-- 查询窗口 -->
    <el-form
      ref="queryForm"
      :model="queryParams"
      class="form"
    >
      <!-- 第一行 -->
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item
            size="small"
            prop="saleNo"
            label-width="110px"
          >
            <label
              slot="label"
            >{{$t('trade_order_order_437')}}</label>
            <el-input
              v-model="queryParams.saleNo"
              clearable
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item
            size="small"
            prop="userId"
            label-width="110px"
          >
            <label
              slot="label"
            >{{$t('trade_order_order_438')}}</label>
            <el-input
              v-model="queryParams.userId"
              clearable
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item
            :label="$t('trade_order_order_439')"
            size="small"
            prop="status"
            label-width="110px"
          >
            <el-select
              v-model="queryParams.status"
              :placeholder="$t('trade_order_order_440')"
            >
              <el-option
                v-for="item in StatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item
            :label="$t('trade_order_order_441')"
            size="small"
            prop="createTime"
            label-width="110px"
          >
            <el-date-picker
              v-model="createTime"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-:separator="$t('trade_order_order_442')"
              start-:placeholder="$t('trade_order_order_443')"
              end-:placeholder="$t('trade_order_order_444')"
              style="width: 280px"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item size="small">
            <el-button
              type="primary"
              class="query"
              @click="handleQuery"
            >{{$t('trade_order_order_445')}}</el-button>
            <el-button
              type="primary"
              style="width: 60px; margin-left: 40px"
              @click="resetQuery"
            >{{$t('trade_order_order_446')}}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 按钮 -->
    <el-row :gutter="20">
      <el-col :span="10">
        <el-button
          type="danger"
          :disabled="multiple"
          class="deletes"
          @click="handleOrderDelete"
        >{{$t('trade_order_order_447')}}</el-button>
      </el-col>
    </el-row>
    <!-- 数据展示Table -->
    <el-table
      ref="DataTable"
      v-loading="loading"
      border
      :data="dataList"
      style="border: 1px solid rgb(211 211 211); margin-left: 20px; width: 96%"
      row-key="id"
      @selection-change="handleSelectionChange"
      @expand-change="clickData"
      @row-click="clickData"
    >
      <!-- 下拉表格 -->
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form
            ref="orderEditForm"
            label-position="left"
            inline
            class="demo-table-expand"
            :model="orderEditForm"
          >
            <!-- 第一行 -->
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item :label="$t('trade_order_order_437')">
                  <span>{{ props.row.saleNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item :label="$t('trade_order_order_439')">
                  <el-tag
                    v-if="props.row.status === 1"
                    type="success"
                    effect="dark"
                  >{{$t('trade_order_order_448')}}</el-tag>
                  <el-tag
                    v-if="props.row.status === 2"
                    type="info"
                    effect="dark"
                  >{{$t('trade_order_order_449')}}</el-tag>
                  <el-tag
                    v-if="props.row.status === 3"
                    type="warning"
                    effect="dark"
                  >{{$t('trade_order_order_450')}}</el-tag>
                  <el-tag
                    v-if="props.row.status === 4"
                    type="danger"
                    effect="dark"
                  >{{$t('trade_order_order_451')}}</el-tag>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item :label="$t('trade_order_order_452')">
                  <span>{{ props.row.total }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-button
                  type="primary"
                  class="query"
                  style="width: 150px;margin-left:10px;margin-right: 10px;"
                  @click="EditNote(props.row)"
                >{{$t('trade_order_order_453')}}</el-button>
              </el-col>
            </el-row>
            <!-- 第二行 -->
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item :label="$t('trade_order_order_438')">
                  <span>{{ props.row.userId }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item :label="$t('trade_order_order_454')">
                  <span>{{ props.row.quantity }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item :label="$t('trade_order_order_455')">
                  <span>{{ props.row.preferentialTotal }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-button
                  type="primary"
                  class="query"
                  style="width: 150px;margin-left:10px;margin-right: 10px;"
                  @click="handleDailogOpen()"
                >{{$t('trade_order_order_456')}}</el-button>
              </el-col>
            </el-row>
            <!-- 第三行 -->
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item :label="$t('trade_order_order_457')">
                  <span>{{ props.row.createTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item :label="$t('trade_order_order_458')">
                  <el-input
                    v-model="props.row.note"
                    style="margin-left: 10px;width: 350px;"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        width="50"
        align="center"
      />
      <el-table-column
        show-overflow-tooltip
        :label="$t('trade_order_order_437')"
        align="center"
        prop="saleNo"
        width="120px"
      />
      <el-table-column
        show-overflow-tooltip
        :label="$t('trade_order_order_438')"
        align="center"
        prop="userId"
        width="100px"
      />
      <el-table-column
        show-overflow-tooltip
        :label="$t('trade_order_order_454')"
        align="center"
        prop="quantity"
        width="135px"
      />
      <el-table-column
        show-overflow-tooltip
        :label="$t('trade_order_order_452')"
        align="center"
        prop="total"
        width="120px"
      />
      <el-table-column
        show-overflow-tooltip
        :label="$t('trade_order_order_455')"
        align="center"
        prop="preferentialTotal"
        width="130px"
      />
      <el-table-column
        :label="$t('trade_order_order_439')"
        align="center"
        width="110px" 
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.status == 1"
            type="success"
            effect="dark"
          >{{$t('trade_order_order_448')}}</el-tag>
          <el-tag
            v-if="scope.row.status == 2"
            type="info"
            effect="dark"
          >{{$t('trade_order_order_459')}}</el-tag>
          <el-tag
            v-if="scope.row.status == 3"
            type="warning"
            effect="dark"
          >{{$t('trade_order_order_450')}}</el-tag>
          <el-tag
            v-if="scope.row.status == 4"
            type="danger"
            effect="dark"
          >{{$t('trade_order_order_460')}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        :label="$t('trade_order_order_461')"
        align="center"
        prop="payType"
        width="130px"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.payType == 1"
            type="success"
            effect="dark"
          >{{$t('trade_order_order_462')}}</el-tag>
          <el-tag
            v-if="scope.row.payType == 2"
            effect="dark"
          >{{$t('trade_order_order_463')}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        :label="$t('trade_order_order_441')"
        align="center"
        prop="createTime"
        width="180px"
      />
      <el-table-column
        show-overflow-tooltip
        :label="$t('trade_order_order_458')"
        align="center"
        prop="note"
      />
      <el-table-column
        :label="$t('trade_order_order_464')"
        align="center"
        width="150px"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleOrderDelete(scope.row)"
          >{{$t('trade_order_order_465')}}</el-button>
          <el-button
            v-if="scope.row.status === 1"
            size="small"
            type="text"
            icon="el-icon-right"
            @click="continueSale(scope.row.saleNo)"
          >{{$t('trade_order_order_466')}}</el-button>
          <el-button
            v-if="scope.row.status === 2"
            size="small"
            type="text"
            icon="el-icon-right"
            @click="continueSale(scope.row.saleNo)"
          >{{$t('trade_order_order_467')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页加载 -->
    <el-pagination
      :current-page="showAllParams.current"
      :page-sizes="[5, 10, 20]"
      :page-size="showAllParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 查看商品详情弹窗，默认不显示 -->
    <el-dialog
      :title="$t('trade_order_order_456')"
      :visible.sync="checkProductList"
      width="800px"
      height="500px"
      append-to-body
    >
      <el-table
        ref="DataTable"
        v-loading="loading"
        border
        :data="OrderDetail"
        style="border: 1px solid rgb(211 211 211); margin-left: 20px; width: 96%"
        row-key="id"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          show-overflow-tooltip
          :label="$t('trade_order_order_468')"
          align="center"
          prop="productName"
        />
        <el-table-column
          :label="$t('trade_order_order_469')"
          align="center"
          prop="imageUrl"
          width="150px"
        >
          <template slot-scope="scope">
            <img
              v-if="scope.row.imageUrl != null"
              :src="scope.row.imageUrl"
              alt="Product Image"
              style="width: 120px; height: auto"
            >
            <span v-else>{{$t('trade_order_order_470')}}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('trade_order_order_471')"
          align="center"
          width="100px"
          prop="color,size"
        >
          <template slot-scope="scope">
            [{{ scope.row.color }},{{ scope.row.size }}]
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          :label="$t('trade_order_order_472')"
          align="center"
          prop="price"
          width="100px"
        />
        <el-table-column
          show-overflow-tooltip
          :label="$t('trade_order_order_473')"
          align="center"
          prop="quantity"
          width="100px"
        />
        <el-table-column
          show-overflow-tooltip
          :label="$t('trade_order_order_474')"
          align="center"
          prop="subTotal"
          width="100px"
        />
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { updateOrder, getOrderList, getOrderDetail, delOrder, delOrderList} from '@/api/order'

export default {
  data() {
    return {
      loading: false,
      // 订单表格数据
      dataList: [],
      // 订单商品详情列表
      OrderDetail: [],
      // 分页展示所有产品參數
      showAllParams: {
      },
      // 查询参数
      queryParams: {
        current: 1,
        pageSize: 5,
        saleNo: '',
        userId: '',
        status: '',
        startTime: ' ',
        endTime: ' '
      },
      // 上线时间数组
      createTime: [],
      // 总条数
      total: 0,
      // 选中数组
      ids: [],
      saleNoes: [],
      // 非单个禁用
      single: true,
      value: [],
      // 类别下拉框选项数据
      categoryTree: [],
      // 状态下拉框选项数据
      StatusOptions: [
        {
          value: '1',
          label: this.$t('trade_order_order_448')
        },
        {
          value: '2',
          label: this.$t('trade_order_order_459')
        },{
          value: '3',
          label: this.$t('trade_order_order_450')
        },{
          value: '4',
          label: this.$t('trade_order_order_460')
        }
      ],
      // 要删除的id
      delData: {
        id: ''
      },
      // 勾选1个或多个
      multiple: true,
      // 是否显示弹窗
      checkProductList: false,
      // 下拉表单
      orderEditForm: {},
      // 存放已选择的图片URL
      imageUrl: '',
    }
  },
  created() {
    this.getAllOrder()
  },
  methods: {
    // 继续交易
    continueSale(saleNo) {
      this.$router.push("/sale/cash", () => {
        this.$bus.$on("saleReady", () => {
          // console.log(this.$t('trade_order_order_475'));
          this.$bus.$emit("continueSale", saleNo)
          // console.log(this.$t('trade_order_order_476'), saleNo);
        })
      });
    },
    // 取消交易
    // handleOrderCancel(row) {
    //   if(row.status == 1 || row.status ==2) {
    //     const editStatusParams = {
    //       id: row.id,
    //       status: 4
    //     }
    //     updateOrder(editStatusParams).then(() => {
    //     this.$message.success('成功取消交易')
    //       }).catch(() => {
    //     this.$message.error('取消交易失败!')
    //   })
    //   }
    // },
    // 打开商品详情弹窗
    handleDailogOpen() {
      this.checkProductList = true
    },
    // 修改时间格式
    formatTime(date) {
      var dateee = new Date(date).toJSON();
      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    },
    // 展示所有订单数据
    getAllOrder() {
      this.loading = true
      getOrderList(this.showAllParams).then((response) => {
        this.dataList = response.data.records
        // console.log(this.dataList);
        this.dataList.forEach(item => {
          item.createTime = this.formatTime(item.createTime)
        })
        this.total = Number(response.data.total)
        this.loading = false
      })
    },
    // 展示查询的所有产品数据
    getQueryOrderList(queryParams) {
      this.loading = true
      getOrderList(queryParams).then((response) => {
        this.dataList = response.data.records
        this.dataList.forEach(item => {
          item.createTime = this.formatTime(item.createTime)
        })
        this.total = Number(response.data.total)
        this.loading = false
      })
    },
    // 修改备注
    EditNote(row) {
      // console.log(this.orderEditForm.saleId);
      const editNoteParams = {
        id: row.id,
        note: row.note
      }
      updateOrder(editNoteParams).then(() => {
        this.$message.success(this.$t('trade_order_order_477'))
        this.getAllOrder()
          }).catch(() => {
        this.$message.error(this.$t('trade_order_order_478'))
        this.getAllOrder()
      })
    },
    // 重置查询表单
    resetQuery() {
      this.$refs.queryForm.resetFields()
      this.createTime = []
      // console.log('@@queryForm', this.$refs.queryForm)
      this.getAllOrder()
    },
    // 搜索按钮操作
    handleQuery() {
      const queryParams = { ...this.queryParams }
      queryParams.startTime = this.createTime[0]?.slice(0, 10)
      queryParams.endTime = this.createTime[1]?.slice(0, 10)
      // console.log(this.queryParams)
      this.getQueryOrderList(queryParams)
    },
    // 删除/批量删除订单
    handleOrderDelete(row) {
      const saleId = row.id || this.ids
      const saleNo = row.saleNo || this.saleNoes
      // console.log(this.saleNoes)

      this.$confirm(
        this.$t('trade_order_order_479') + saleNo + this.$t('trade_order_order_480'),
        this.$t('trade_order_order_481'),
        {
          confirmButtonText: this.$t('trade_order_order_482'),
          cancelButtonText: this.$t('trade_order_order_483'),
          type: 'warning'
        }
      ).then(() => {
        // console.log(row.id)
        if (Array.isArray(this.ids) && this.ids.length > 1) {
          return delOrderList(this.ids)
        } else {
          return delOrder(saleId)
        }
      }).then((response) => {
        // console.log(response)
        this.$message({
          type: 'success',
          message: this.$t('trade_order_order_484')
        })
        this.getAllOrder()
      }).catch(() => {
        // 用户取消了删除操作
        this.$message({
          type: 'info',
          message: this.$t('trade_order_order_485')
        })
      })
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.saleNoes = selection.map((item) => item.saleNo)
      this.single = selection.length !== 1
      this.multiple = !selection.length
      // console.log(this.ids)
    },
    // 点击表格事件/展开行事件
    clickData(row) {
      getOrderDetail(row.id).then((response) => {
        this.OrderDetail = response.data.saleItemList
        // console.log(this.OrderDetail);
        // this.OrderDetail.forEach(item => {

        // })
      })
    },
    // 处理分页操作
    handleSizeChange(val) {
      this.showAllParams.pageSize = val
      this.getAllOrder()
    },
    handleCurrentChange(val) {
      this.showAllParams.current = val
      this.getAllOrder()
    },
  }
}
</script>
<style lang="scss" scoped>
.form {
  border: 2px dashed rgb(211, 211, 211);
  padding: 20px;
  padding-bottom: 0px;
  margin: 10px 20px 20px 20px;
}

.warning {
  width: 130px;
  margin-left: 20px;
  margin-bottom: 10px;
}

.deletes {
  width: 130px;
  margin-left: 20px;
  margin-bottom: 10px;
}

.query {
  margin-left: 30px;
  width: 60px;
}

.page {
  margin-top: 10px;
  margin-left: 280px;
}

/* 数据展示表格 */
.demo-table-expand {
  margin-left: 10px;
  font-size: 0;
}

.demo-table-expand label {
  width: 100px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 5px;
  width: 100%;
}
</style>
<style>
.el-tooltip__popper {
  max-width: 20%;
}

.el-icon-success {
  margin-left: 20px;
  font-size: 20px;
  color: green;
}
</style>
